<template>
<div  class="avatar-wrapper" v-if="props.src">
  <icon-crown class="crown"></icon-crown>
  <img :src="props.src" alt="" class="avatar" id="avatar" >
</div>
  <el-avatar v-else></el-avatar>
</template>

<script setup lang="ts">


import IconCrown from "@/components/icons/IconCrown.vue";

const props = defineProps({
  topValue:{
    type:Number,
    default:999
  },
  src:{
    type:String,
    default:""
  },
  shape:{
    type:String,
    default:"circle"
  }
})
</script>

<style scoped>
.avatar-wrapper {
  position: relative; /* 关键：作为绝对定位的参考 */
  display: inline-block; /* 或 block，根据布局需求 */
  padding: 20px 0 0 10px;  /* 顶部留出王冠的空间 */
}
.avatar {
  width: 50px;
  height: 50px;
  margin-top: 4px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ec9312;
}

.crown {
  position: absolute;
  height: 30px;
  transform: rotate(-30deg);
  top: 0; /* 调整为父容器 padding 内的位置 */
  left: 0;
}
</style>
